<template>
	<z-paging ref="paging" v-model="coach" @query="getcoach">
		<template>
			<view class="d-p-l-30 d-p-r-30">
				<view class="d-font-28 d-red">友情提示：请先电话预约教练在选择教练或者主管，若电话未接通请咨询各场馆前台热线！！</view>
				<view v-for="(item,index) in coach" :key="index">
					<view class="d-font-30 u-line-1 d-xuxian"></view>
					<view class="d-font-34 d-bolda d-jule">{{item.name}}</view>
					<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" v-for="(im, inx) in item.teachers" :key="index">
						<u-image :src="picture" width="148rpx" height="200rpx"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<!-- <view class="d-m-t-60 d-font-30 d-red">
								<text class="d-font-24">教练：</text>
								<text class="d-bold">陈明昕</text>
							</view> -->
							<view class="d-font-30 d-white">教练：{{im.name}}</view>
							<view class="d-font-30 d-white">年龄：{{im.age}}</view>
							<view class="d-font-30 d-white">性别：{{im.sex}}</view>
							<view class="d-font-30 d-white">所属场馆：{{im.vname}}</view>
							<view class=" d-font-30 d-white">
								<text class="d-font-30">联系电话：</text>
								<text class="d-bold">{{im.mobile}}</text>
							</view>
							<view class="d-font-30 d-white">简介：{{im.content}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->
							
						</view>
						<view class="btn-tlty" @click="cardDetail">选择</view>
					</view>
				</view>
			</view>
		</template>
		<customer-Kefu ></customer-Kefu>
	</z-paging>
</template>

<script>
	import {
		teacherlist 
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue';
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				coach: [],
				picture: '../../static/home.png',
				current:'',
				cardType:'',
				venue_name:'',
				id:'',
				teacher_type:''
			};
		},
		onLoad(e) {
			console.log(e,'222')
			this.current = e.current
			this.cardType = e.cardType
			this.teacher_type = e.teacher_type
			this.venue_name = e.venue_name
			this.id = e.id
		},
		methods: {
			getcoach() {
				teacherlist({
						vname: this.venue_name,
						type: this.teacher_type
					})
					.then(res => {
						console.log(res, '9966')
						this.$refs.paging.complete(res);
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			cardDetail(){
				uni.$u.route({
					url: '/pageA/teacherspa/teacherspa',
					params: {
						// id,
						current: this.current,
						cardType:this.cardType,
						id:this.id
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
.d-list-box {
		// box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		// background: rgb(48,182,134);
		// border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff0000;
		margin-top: 10rpx !important;
	}
	.d-white {
		color: #000000;
		// margin-top: 10rpx !important;
	}
	
	.d-xuxian{
		width: 100%;
		height: 1rpx;
		border-bottom: 1px solid #acacac;
		margin-top: 10rpx;
	}

	.d-bold {
		color: #00a7ff;
	}
	.d-bolda {
		font-weight: bold;
	}
	.d-jule{
		margin-top: 20rpx;
	}
	.btn-tlty {
		width: 13vw;
		line-height: 9vw;
		background-color: #00a7ff;
		color: white;
		text-align: center;
		margin-top: 30rpx;
		
		
		// position: absolute;
		// right: 2vw;
		// top: 10vw;
		// padding: 2vw 3vw;
		// background-color: #00a7ff;
		// color: white;
	}
</style>